<template>
  <div class="hospital-num flex-center">
    <div class="num-content">
      <div class="num">
        <p class="place-text">{{ num && num.length ? num : '请输入患者住院号' }}</p>
      </div>
      <div class="keyboard">
          <div
          v-for="item in numList"
          :key="item.key"
          @click="clickItem(item)"
          :class="{'key-item': true, 'clear-btn': item.key === 'CLEAR', 'confirm-btn': item.key === 'CONFIRM'}"
          >{{ item.value }}</div>
      </div>
    </div>
    <div class="warm-tip">
        <span class="tip">温馨提示：</span>
        <span>点击数字键盘，输入患者住院号，输入完成后请仔细核对，准确无误后点击 ”确认”按钮进行下一步。</span>
    </div>
    </div>
  </div>
</template>
<script>

export default {
    data() {
        return {
            numList: [
                {
                    key: 1,
                    value: 1
                },
                {
                    key: 2,
                    value: 2
                },
                {
                    key: 3,
                    value: 3
                },
                {
                    key: 4,
                    value: 4
                },
                {
                    key: 5,
                    value: 5
                },
                {
                    key: 6,
                    value: 6
                },
                {
                    key: 7,
                    value: 7
                },
                {
                    key: 8,
                    value: 8
                },
                {
                    key: 9,
                    value: 9
                },
                {
                    key: 0,
                    value: 0
                },
                {
                    key: 'M',
                    value: 'M'
                },
                {
                    key: 'W',
                    value: 'W'
                },
                {
                    key: 'Y',
                    value: 'Y'
                },
                {
                    key: 'CLEAR',
                    value: '清空'
                },
                {
                    key: 'CONFIRM',
                    value: '确认'
                }
            ],
            numArr: []
        }
    },
    computed: {
        num() {
            return this.numArr.join('')
        },
        path() {
            return this.$route.query.path
        }
    },
    methods: {
        clickItem(item) {
            if (item.key === 'CLEAR') {
                this.clearClick(item)
            }
            else if (item.key === 'CONFIRM') {
                this.confirmClick()
            }
            else {
                this.numClick(item)
            }
        },
        clearClick(item) {
            this.numArr.length && this.numArr.pop()
        },
        confirmClick() {
            console.log('确认后得到的住院号:', this.num)
            const path = this.path ? this.path : '/advancePayment'
            this.$router.push(path)
        },
        numClick(item) {
            this.numArr.push(item.value)
        }
    }
}
</script>

<style lang="scss" scoped>

.hospital-num {
    height: 100%;
    position: relative;
    .num-content {
        width: 470px;
        padding: 40px 0 0 0;
        box-sizing: border-box;
    }
    .num {
        width: 100%;
        height: 63px;
        line-height: 63px;
        background: #FFFFFF;
        border: 1px solid #B7D5FF;
        border-radius: 11px;
        margin-bottom: 30px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .place-text {
        font-size: 26px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #A2AABC;
    }
    .keyboard {
        display: flex;
        flex-wrap: wrap;
    }
    .key-item {
        width: 142px;
        height: 54px;
        line-height: 54px;
        text-align: center;
        background: #2D87FF;
        border-radius: 11px;
        font-size: 28px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFFFF;
        margin-right: 20px;
        margin-bottom: 20px;
        &:nth-child(3n) {
            margin-right: 0
        }
    }
    .clear-btn {
        background: #757F8D;
    }
    .confirm-btn {
        background: #FEC019;
    }
    .warm-tip {
        width: 322px;
        word-break: break-all;
        position: absolute;
        right: 50px;
        top: 50%;
        margin-top: -50px;
        font-size: 20px;
        color: #585D69;
        span {
            line-height: 34px;
        }
        .tip {
            font-weight: 700;
        }
    }
}
</style>

